<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
        <img :src="item.url" :title="item.title" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div> -->
    <!-- <div class="swiper-button-next"></div> -->

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>
</template>

<script>
import { imgUrl } from "@/api";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
  data() {
    return {
      bannerList: [],
    };
  },
  created() {},
  mounted() {
    this.getImgUrl();
  },
  methods: {
    onChangeSwiper() {
      const that = this;
      new Swiper(".swiper-container", {
        // direction: 'vertical', // 垂直切换选项
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 370, // 图片两边的视距
          modifier: 1, // depth和rotate和stretch的倍率
          slideShadows: false, // 是否开启slide阴影
        },
        loop: true, // 循环模式选项
        observer: true, //开启动态检查器，监测swiper和slide
        // allowTouchMove: false, //设置是否允许触摸滑动
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          // disableOnInteraction: true, // 触摸停止自动切换
          disableOnInteraction: false,
        },
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
        },
        on: {
          // 如果进度条未加载，在init 调用 that.onChangeWidth()
          init: () => {},
          // 过渡开始时触发。可选Swiper实例作为参数，会首次加载一次
          transitionStart: () => {},
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 如果需要滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });
    },
    async getImgUrl() {
      const res = await imgUrl();
      if (res.code == 200) {
        this.bannerList = res.data;
        this.$nextTick(() => {
          this.onChangeSwiper();
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  cursor: pointer;
  width: 100%;
  height: 100%;
  // overflow: visible !important;
}

.swiper-slide {
  width: 600px;
  height: 370px;
  background-position: center;
  background-size: cover;
  > img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.swiper-pagination {
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 25px;
  line-height: 25px;
  border-radius: 4px;
  font-size: 16px;
  color: #fff !important;
  background-color: rgba($color: #000000, $alpha: 0.4);
}
</style>
